/**
 * ThemeToggle 组件样式
 */

// 彻底移除 Dropdown overlay 的默认样式
.theme-dropdown-overlay {
  background: transparent;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

// 主题选择面板样式
.theme-panel {
  width: 280px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: #fff;
  overflow: hidden;
}

// 面板内容区域
.theme-panel-content {
  padding: 16px;
}

// 主题选项容器
.theme-options-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

// 主题选项按钮
.theme-option-button {
  height: 40px;
  padding: 8px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
  text-align: left;
  border-radius: 8px;
  transition: all 0.3s ease;

  // 非激活状态边框
  &:not(.ant-btn-primary) {
    border: 1px solid #e8e8e8;
  }

  // 激活状态无边框
  &.ant-btn-primary {
    border: none;
  }
}

// 主题图标
.theme-icon {
  font-size: 18px;
}

// 主题名称文字
.theme-text {
  font-size: 13px;
  font-weight: 400;

  // 激活状态文字样式
  .ant-btn-primary & {
    color: #fff;
    font-weight: 500;
  }
}

// 主题切换按钮
.theme-toggle-button {
  color: var(--theme-text-secondary, #8c8c8c);
  border: none;
  border-radius: 6px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;

  &:hover {
    color: var(--theme-primary, #1890ff);
    background: var(--theme-primary-bg, rgba(24, 144, 255, 0.06));
  }
}

// 当前主题图标
.current-theme-icon {
  font-size: 12px;
}
